<template>
  <div class="app-container calendar-list-container">
    <div v-if="!opShow">
      <search :list="queryList" :queryEntity="queryEntity"></search>
      <buttons :showQuery="true" @query="doQuery" :list="btnList" :disabled="disabled" placeholder="物料名称" :permissions="permissions" @add="doAdd"></buttons>
      <grid :columns="columns" :multi="false" :url="queryUrl" ref="mainGrid" height="auto" diffHeight="105" @change="rowCilck" :pagination="true" :queryEntity="queryEntity"
        @edit="doEdit" @view="doView" @delete="doDelete" @model="openModel" @open="doOpen" @close="doClose" :permissions="permissions" @step="doStep"></grid>
    </div>
    <op ref="op" :visible="opShow" @cancel="cancel"></op>
  </div>
</template>

<script>
import request from '@/router/axios'
import url from '@/const/apiURL'
import grid from '@/components/Grid'
import search from '@/components/Search'
import buttons from '@/components/Buttons'
import op from './op'
import { Message, MessageBox } from 'element-ui'
import { initMenu } from "@/util/util";
import { resolveUrlPath } from "@/util/util";
import { mapGetters } from 'vuex'
import { YesOrNoFormatter } from '@/const/dict'
import { dict } from '@/const/dict'
import { colunms } from '@/const/colunms'
import { bgColor } from '@/const/bgColor'

export default {
  components: { grid, buttons, op, search },
  data () {
    return {
      queryUrl: url.MATERIAL_LIST_URL,
      disabled: true,
      opShow: false,
      queryEntity: { outStatus: 1, excipientsStatus: 1 },
      columns: [
        {
          label: '操作', width: 250, prop: 'op', align: 'center', template: 'op', opList: [
            { name: '编辑', clickName: 'edit', auth: 'material_edit' },
            { name: '查看', clickName: 'view', auth: 'material_view' },
            { name: '工序', clickName: 'step', auth: 'material_step' },
            { name: '开启', clickName: 'open', auth: 'material_open', confirm: true },
            { name: '关闭', clickName: 'close', auth: 'material_close', confirm: true },
            { name: '色号管理', clickName: 'model', auth: 'material_model' }
          ]
        },
        { label: '物料名称', width: 350, prop: 'materialName', align: 'left' },
        //{ label: '别名', width: 200, prop: 'materialNameEn', align: 'left' },
        { label: '物料类型', width: 100, prop: 'materialTypeName', align: 'center' },
        { label: '单位', width: 80, prop: 'unit', align: 'center' },
        { label: '克重', width: 100, prop: 'weight', align: 'center' },
        { label: '类别', width: 100, prop: 'volume', align: 'center' },
        { label: '是否启用', width: 80, prop: 'status', align: 'center', formatter: YesOrNoFormatter, template: 'bgColor', bgColor: bgColor().YesOrNo },
        { label: '创建人', width: 100, prop: 'createUserName', align: 'center' },
        { label: '创建时间', width: 100, prop: 'createTime', align: 'center' }
      ],
      btnList: [
        { name: '新增', type: 'primary', icon: 'edit', click: 'add', auth: 'material_add', ctr: false },
        // { name: '编辑', type: 'primary', icon: 'edit', click: 'edit', auth: 'material_edit', ctr: true },
        //  { name: '查看', type: 'primary', icon: 'edit', click: 'view', auth: 'material_view', ctr: true },
        // { name: '开启', type: 'primary', icon: 'edit', click: 'open', auth: 'material_open', ctr: true, confirm: true },
        // { name: '关闭', type: 'primary', icon: 'edit', click: 'close', auth: 'material_close', ctr: true, confirm: true },
        // { name: '色号管理', type: 'primary', icon: 'edit', click: 'model', auth: 'material_model', ctr: true }
      ],
      queryList: [
        { name: '物料名称', type: 'text', prop: 'materialNameLike', placeholder: "物料名称" },
        { name: '物料类型', type: 'query', prop: 'materialType', rowValue: 'typeCode', rowName: 'typeName', url: url.TYPE_USABLE_URL, columns: colunms().materialTypeColumns },
        { name: '是否启用', type: 'select', prop: 'status', placeholder: "是否启用", values: dict().YesOrNo, label: 'name', value: 'value' }
      ]
    }
  },
  computed: {
    ...mapGetters([
      'permissions'
    ])
  },
  methods: {
    doAdd () {
      this.templateOp().then((data) => {
        this.opShow = true
        this.$refs['op'].init('新增', { props: data }, false, url.MATERIAL_ADD_URL)
      })
    },
    doEdit (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      //  if (row) {
      this.viewOp(row.materialCode).then((data) => {
        this.opShow = true
        this.$refs['op'].init('编辑', data, false, url.MATERIAL_EDIT_URL)
      })
      //  }
    },
    doView (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      // if (row) {
      this.viewOp(row.materialCode).then((data) => {
        this.opShow = true
        this.$refs['op'].init('查看', data, true)
      })
      // }
    },
    doDelete (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      // if (row) {
      // 删除数据
      this.deleteOp(row.materialCode).then((data) => {
        if (data) {
          this.$refs['mainGrid'].reload()
        }
      })
      // }
    },
    doStep (row) {
      // const row = this.$refs['mainGrid'].getSelectOne()
      if (row) {
        this.$router.push({
          path: '/prod/material/step',
          query: { materialCode: row.materialCode }
        })
      }
    },
    doQuery (text) {
      this.$refs['mainGrid'].doQuery(text)
    },
    rowCilck (row) {
      this.disabled = row.length == 0
    },
    cancel () {
      this.opShow = false
    },
    deleteOp (code) {
      return request({
        url: url.MATERIAL_DELETE_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'materialCode': code }
      })
    },
    templateOp () {
      return request({
        url: url.TEMPLATE_USABLE_URL,
        method: 'post',
        data: { 'key': 'key' },
      })
    },
    viewOp (materialCode) {
      return request({
        url: url.MATERIAL_VIEW_URL,
        method: 'post',
        params: { materialCode },
        data: { materialCode }
      })
    },
    openOp (code) {
      return request({
        url: url.MATERIAL_OPEN_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'materialCode': code }
      })
    },
    closeOp (code) {
      return request({
        url: url.MATERIAL_CLOSE_URL,
        method: 'post',
        data: { 'key': 'key' },
        params: { 'materialCode': code }
      })
    },
    doOpen (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      // if (row) {
      this.openOp(row.materialCode).then((data) => {
        if (data) {
          this.$refs['mainGrid'].reload()
        }
      })
      // }
    },
    doClose (row) {
      //  const row = this.$refs.mainGrid.getSelectOne()
      //  if (row) {
      this.closeOp(row.materialCode).then((data) => {
        if (data) {
          this.$refs['mainGrid'].reload()
        }
      })
      // }
    },
    openModel (row) {
      // const row = this.$refs.mainGrid.getSelectOne()
      // if (row) {
      this.$router.push({ path: '/admin/material/model', query: { materialCode: row.materialCode, materialName: row.materialName } })
      // }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
</style>
